Feat(client): ParentTagList 컴포넌트 구현 - #292
Open
twossu wants to merge 5 commits into
Open
Conversation
twossu
requested review from
jm8468,
jogpfls and
jyeon03
and removed request for
a team
August 19, 2026 14:40
twossu
changed the title
🎨 Storybook 배포 완료PR 작성자: @twossu |
twossu
marked this pull request as draft
August 19, 2026 14:45
twossu
changed the base branch from
develop
to
feat/tag-tree-select-component/#286
August 20, 2026 07:17
twossu
marked this pull request as ready for review
August 20, 2026 07:26
twossu
marked this pull request as draft
August 21, 2026 23:17
twossu
marked this pull request as ready for review
August 21, 2026 23:17
twossu
force-pushed
the
feat/parent-tag-list-component/#291
branch
2 times, most recently
from
August 22, 2026 13:33
40a8c2e to
d62eee2
Compare
jm8468
reviewed
Aug 22, 2026
| } | ||
|
|
||
| const SidebarItem = ({ | ||
| const NavItem = ({ |
Collaborator
There was a problem hiding this comment.
어떤 컴포넌트 이름을 하게되든 이 컴포넌트 props가 ButtonHTMLAttributes를 상속받는다고 예상하기 어려워용
onClick과 disabled도 props로 직접 드러내면 좋을 것 같아요!
상속은 아예 없애구요
Member
Author
There was a problem hiding this comment.
이전 사이드바 리팩토링에서 비슷한 코멘트가 있었던 것 같아서 확인해봤는데 그때 제안 주셨던 extends ButtonHTMLAttributes + onClickItem 방식이 아니라 Pick<'onClick' | 'disabled'> 형태로 merge되어 있더라고요.
지금도 Pick으로 onClick, disabled를 명시적으로 노출되고 있어서 어느 정도 예측 가능하고 확장성도 있다고 생각하는데 그래도 상속 자체를 완전히 없애는 방향으로 바꾸는 게 나을까요?
Collaborator
There was a problem hiding this comment.
아까 디코에서 얘기드렸던것과 비슷한 맥락으로
MenuItem이라는 컴포넌트 명과 props만 보고, 컴포넌트 내부에서 <ButtonHTMLAttributes>를 상속받고 있다고 보기 어려웠어요.
컴포넌트 설계에서 중요한 점 중 하나는
- 컴포넌트 내부 로직을 보지않고,
- 컴포넌트 명과
- props만으로 어떻게 사용할지 알아야 한다
라고 생각해요
Base automatically changed from
feat/tag-tree-select-component/#286
to
develop
August 23, 2026 11:24
twossu
force-pushed
the
feat/parent-tag-list-component/#291
branch
2 times, most recently
from
August 23, 2026 11:32
9ca9285 to
3c8aaef
Compare
jm8468
approved these changes
Aug 23, 2026
twossu
force-pushed
the
feat/parent-tag-list-component/#291
branch
from
August 23, 2026 14:20
5d648fc to
95dd62e
Compare
jm8468
reviewed
Aug 23, 2026
Comment on lines
12
to
+14
| content?: string; | ||
| isSelected?: boolean; | ||
| size?: 'sm' | 'lg'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Summary
부모 태그를 선택할 수 있는
ParentTagList컴포넌트를 구현했습니다.📚 Tasks
SidebarItem→NavItem으로 네이밍 변경 및 공용 컴포넌트로 위치 이동ParentTagList컴포넌트 및 스타일 구현🔍 Describe
SidebarItem->NavItemParentTagList도 "아이콘 + 텍스트 + 선택 상태"를 가진 클릭 가능한 아이템이 필요했는데 기존SidebarItem은 사이드바 폴더 안에 있어서 재사용하기엔 위치도 이름도 맞지 않았습니다. 단순히 import 경로만 끌어오기보다 사이드바 전용이라는 이름 자체가 재사용을 가로막는 요소라고 판단해shared/components로 옮기고NavItem이라는 더 일반적인 이름으로 바꿨습니다. 더 아름답고 직관적인 이름이 있다면 추천해주시라요🧎TagNode[]같은 태그 데이터를 다루는
SidebarTagItem은TreeNode<TagNode>를 받아children을 재귀적으로 순회하며 트리 전체를 그립니다. 반면ParentTagList는 자식 태그를 다루지 않고 부모 태그만 한 줄로 나열하는 게 목적이라 트리 순회가 필요 없는 만큼 평면 배열인TagNode[]를 그대로 사용했습니다.전역 스크롤바 스타일을 분리한 이유
기존에는
scrollbarWidth/scrollbarColor/scrollBehavior가globalStyle('html, body', …)안에 묶여 있어서 사실상 최상위 스크롤에만 얇은 스크롤바가 적용되고 있었습니다.ParentTagList는 컴포넌트 내부에overflow-y: auto를 가진 자체 스크롤 영역이 있는데 이 규칙이html, body에만 걸려 있다 보니 내부 스크롤에는 적용되지 않고 브라우저 기본 스크롤바가 그대로 노출됐습니다.이 컴포넌트 하나만을 위해 로컬 스타일로 스크롤바를 다시 정의하면 당장은 해결되지만 앞으로 추가될 다른 스크롤 영역마다 같은 코드를 반복하게 됩니다. 스크롤바 스타일은 컴포넌트 단위가 아니라 디자인 시스템 레벨의 규칙이라고 보는 게 맞다고 판단해
*셀렉터로 옮겨 모든 요소에 일관되게 적용되도록 분리했습니다.📸 Screenshot
parent-tag-recording.mp4